<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京化能源</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        .dropdown-li {
            height: 40px;
        }
    </style>

    <script>
        window.onload = function () {
            $("#htmlContainer").load("html/home.html");
        }
        function pageTo(index) {
            if (index == 0) {
                $("#htmlContainer").load("html/home.html");
            } else if (index == 1) {
                $("#htmlContainer").load("html/companyInfo.html");
            } else if (index == 2) {
                $("#htmlContainer").load("html/leadSpeech.html");
            } else if (index == 3) {
                $("#htmlContainer").load("html/companyCulture.html");
            } else if (index == 4) {
                $("#htmlContainer").load("html/siteView.html");
            } else if (index == 5) {
                $("#htmlContainer").load("html/emergency.html");
            } else if (index == 6) {
                $("#htmlContainer").load("html/oilCategoryInfo.html");
            } else if (index == 7) {
                $("#htmlContainer").load("html/serviceCulture.html");
            } else if (index == 8) {
                $("#htmlContainer").load("html/recentFavorable.html");
            } else if (index == 9) {
                $("#htmlContainer").load("html/joinUs.html");
            } else if (index == 10) {
                $("#htmlContainer").load("html/contactUs.html");
            }

            $("#bs-example-navbar-collapse-1").removeClass("in");
            $("#bs-example-navbar-collapse-1").setAttribute("aria-expandend", false);
            $("#bs-example-navbar-collapse-1").removeAttribute("style");
        }
    </script>
</head>

<body>
<div class="container-fluid">
    <nav class="navbar navbar-default" style="margin-bottom: 0px;">
    <!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">
                    <img alt="Brand" src="image/myLogo.png" width="30" height="30">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0);" onclick="pageTo(0)">首页 <span class="sr-only">(current)</span></a></li>
                    <li class="dropdown">
                        <a onmouseover="dropDownControl(this)"  onmouseleave="dropDownControlLeave(this)" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">京化之家 <span class="caret"></span></a>
                        <ul class="dropdown-menu" onmouseover="dropDownControl(this)"  onmouseleave="dropDownControlLeave(this)">
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(1)">公司简介</a></li>
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(2)">领导致辞</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(3)">公司文化</a></li>
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(4)">各站风貌</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a onmouseover="dropDownControl(this)"  onmouseleave="dropDownControlLeave(this)" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">客户服务 <span class="caret"></span></a>
                        <ul class="dropdown-menu" onmouseover="dropDownControl(this)"  onmouseleave="dropDownControlLeave(this)">
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(5)">紧急救援</a></li>
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(6)">油品资讯</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(7)">服务理念</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a onmouseover="dropDownControl(this)"  onmouseleave="dropDownControlLeave(this)" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">京化资讯 <span class="caret"></span></a>
                        <ul class="dropdown-menu" onmouseover="dropDownControl(this)"  onmouseleave="dropDownControlLeave(this)">
                            <li class="dropdown-li"><a style="display: block;height: 40px;line-height: 40px;" href="javascript:void(0);" onclick="pageTo(8)">最新优惠</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="javascript:void(0);" onclick="pageTo(9)">加入我们</a></li>
                    <li><a href="javascript:void(0);" onclick="pageTo(10)">联系我们</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div id="htmlContainer">
    </div>

    <div style="margin-top: 50px; margin-bottom: 30px;">
        <hr style="height: 1px;"/>
        <div></div>
    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    function dropDownControl(e) {
        parent = e.parentElement;
        parent.classList.add("open");
        e.setAttribute('aria-expanded', true);
    }

    function dropDownControlLeave(e) {
        parent = e.parentElement;
        parent.classList.remove("open");
        e.setAttribute('aria-expanded', false);
    }
</script>
</body>

</html>
